tags: 傳產製圖 Observable 報表

「前」面幾篇的「坑」- 資料格式不支援製圖 function

• 我把前幾天的文章丟給朋友讓他們照著時做了一遍，他們踩掉了一些問題...
  1. 範例中下載來的資料，編碼不是 UTF8
  2. 範例中的資料內容，有些看起來像是數值的東西，實際上是字串
  3. 繪製折線圖的時候，資料跑不出來，仔細一看是時間格式不符合。我們取得的資料格式長得像是 民國 110 年 7 月 或是 110年1月
  4. 日期格式的排列順序，因為是抓取各個文字字串... 導致
     • [110年1月, 110年11月, 110年12月, 110年2月, 110年3月, ...] 這樣的排列
     • 因為字串和字串之間的相比方式，由左邊往右邊閱讀，以至於會把 110年1月 110年11月 和 110年12月 等等由 1 開頭的月份，排列在其他月份前面

「前坑」的合理解法

合理地調整原始資料格式? or 使用程式來修改原始資料?

1. 如果您在讀入 csv 之後，在 observable 上看到的資料很像是亂碼...那你可以

   對於資訊人員來說

   • 您可以透過修改資料的 encoding 讓他變成 utf8

   對非資訊人員來說

   • 您可以直接透過好用的文字編輯器重新將資料轉換成 utf8

2. 如果您發現，讀到的資料，例如期待是拿到數值 56.87 (%)（等價於0.5687 或是 56.87 %）；實際上得到的是被拆成兩個部分："56.87"（通用格式） 和 說明文字 xxx 的 xxx 比例（%） (讓你理解資料裡的文字是表示百分比的意思)

   對資訊人員來說

   • 您可以使用 正規表示法 來擷取資料進行轉換，使之符合各種圖表的輸入資料。（畫長條或是折線圖是在比大小，數值和數值可以比大小，文字跟文字的話除非有特別定義，不然應該是不能比大小的！）

   對非資訊人員來說

   • 在您閱讀本文章的時候，或許只是想要學簡易的畫圖方式，那我不會建議您去特別學習 正規表示法；我會建議您，開啟 Liberal Office、 Google Sheets 或是需要您花錢、別人花錢購買的 Office 的試算表來處理這些資料格式。當然，也非常建議使用純文字編輯器來把玩 csv。

3. 在你的原始資料(csv檔)裡的時間日期，到底是時間日期？還是純文字？

   • 如同上面提到的，依我的經驗來看，直接修改原始資料會比較快。

心得

• 前面幾天玩了 Line Chart 踩到不少坑，針對 observable 網站上提供的 Line chart 以及 D3 Line chart 的這兩種範例，針對 x軸 的輸入文字對應的坑就不同。
  • Observable Plot 的可以丟中文字串進去排，但是會踩掉字串比序的排列方式的坑。
  • 針對 Observable Plot，我直接修改了原始資料。
  • Observable 上的 D3 Line chart 範例，由於 x 只支援 javascript 的 Date() 格式，因此勢必是要撰寫一段 javascript 的程式碼。
• 這些其實都不難，就是要稍微有點耐心找出問題，希望各位傳產從業人員可以得到幫助。